import React, { useEffect, useState } from 'react'
import "@/assets/css/activity.scss"
import HeadBack from "@/components/HeadBack"
import { getActivityList } from "@/utils/dataUtil"
import { activityDateSub } from "@/utils/dateUtil"
import { InfiniteScroll, PullToRefresh, Image } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

export default function Activity() {

    const [activityList, setActivityList] = useState([])
    const [hasMore, setHasMore] = useState(true);
    const [page, setPage] = useState(1);

    const navigate = useNavigate();

    async function loadMore() {
        setPage(p => p + 1);
        const res = await getActivityList(page);
        if (res.status === 1) {
            setActivityList(val => [...val, ...res.data]);
            setHasMore(res.data.length > 0)
        } else {
            setHasMore(false);
        }
    }

    async function loadRefresh() {
        setPage(1);
        const res = await getActivityList(1);
        if (res.status === 1) {
            setHasMore(true)
            setActivityList(res.data);
        }
    }


    useEffect(() => {
        getActivityList(1).then(res => {
            if (res.status === 1) {
                setHasMore(true)
                setActivityList(res.data);
            }
        })
    }, [])

    const clickActivityItem = (id) => {
        navigate("/detail", { state: { id: id } })
    }

    useEffect(() => {
        window.scrollTo(0, 0)
    }, [])

    return (
        <>
            <HeadBack background={"#FFFFFF"} backTit={"活动"} isHome="back"></HeadBack>

            <div className='atContainer'>
                {/* <div className='backEmpty'></div> */}
                <PullToRefresh onRefresh={loadRefresh}>
                    {/* 内容部分 */}
                    <div className='atUl'>

                        {
                            activityList.map((item, index) => (
                                <div className='atLi' key={index} onClick={() => clickActivityItem(item.id)}>
                                    {/* 上面活动封面和标题 */}
                                    <div className='atLiTop'>
                                        <Image src={item.cover} lazy width={"100%"} height={"4.31rem"} style={{ borderTopLeftRadius: "0.33rem", borderTopRightRadius: "0.33rem" }} fit='cover' />
                                        {/* <p className='atLiTopTit'>{item.name}</p>
                  <p className='atLiTopSecTit'>{item.subName}</p> */}
                                    </div>
                                    {/* 下面的介绍 */}
                                    <div className='atLiInfo'>
                                        <div className='atLiInfoLeft'>
                                            <p className='atLiDate'>活动时间：{activityDateSub(item.startDate, item.endDate)}</p>
                                            <p className='atLiCount'>
                                                已有<span className='atLiCountNum'>{
                                                    item.count
                                                }</span>人报名
                                            </p>
                                        </div>
                                        <div className='atLiEnroll'>{item.status !== 'un_enroll' ? '去完成' : '去报名'}</div>
                                    </div>
                                </div>
                            ))
                        }



                    </div>

                </PullToRefresh>

                {
                    activityList.length >= 20 && <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                }
            </div>
        </>

    )
}
